<template>
    <div class="p-2">
        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave">
            <searchrevealing>
                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="98px">
                    <el-form-item label="招商部" prop="dept">
                        <el-select v-model="queryParams.dept" placeholder="请选择招商部" clearable @change="deptChange"
                            filterable style="width: 220px">
                            <el-option v-for="dict in deptList" :key="dict.deptId" :label="dict.deptName"
                                :value="dict.deptId" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="招商员" prop="name">
                        <el-select v-model="queryParams.name" placeholder="请选择招商员" clearable style="width: 220px"
                            filterable>
                            <el-option v-for="dict in recruiterList" :key="dict.userId" :label="dict.nickName"
                                :value="dict.userId" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否已签合同" prop="isContract">
                        <el-select style="width: 220px" v-model="queryParams.isContract" placeholder="请选择" clearable
                            filterable>
                            <el-option v-for="dict in contractStatusList" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleQuery" :loading="queryLoading">查询</el-button>
                        <el-button @click="resetQuery" :loading="queryLoading">重置</el-button>
                    </el-form-item>
                </el-form>
            </searchrevealing>
        </transition>
        <el-card shadow="never">
            <template #header>
                <el-col :span="1.5">
                    <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
                </el-col>
                <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :name="'数据看板昨日建联商家'"
                    @updateColumn="getColmun"></right-toolbar>
            </template>
            <el-table v-loading="loading" :data="list" border @header-dragend="dragEnd">
                <el-table-column label="序号" type="index" align="center" width="60" :fixed="true"
                    show-overflow-tooltip />
                <el-table-column v-for="(item, index) in jlBusinessColumns" :key="index" :label="item.label"
                    align="center" :prop="item.prop" show-overflow-tooltip :fixed="item.fixed" :width="item.width">
                    <template #default="scope">
                        <div :class="computedByLess(scope.row.less)" v-if="item.prop == 'less'">
                            {{ scope.row.less }}
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="paginationChange" />
        </el-card>
    </div>
</template>
<script setup name="jlBusiness" lang="ts">
import { JlBusinessTable } from '@/api/group/statistics/types'
import { merchantList } from '@/api/group/statistics/index';
import { getDeptList, getUserList } from '@/api/group/qualityControl'
import { listColumn } from '@/api/system/column';
const jlBusinessColumns = ref()
const { proxy } = getCurrentInstance() as any;
const queryFormRef = ref<ElFormInstance>();
const showSearch = ref<boolean>(true);
const loading = ref<boolean>(true);
const total = ref<number>(0);
const list = ref<JlBusinessTable[]>([]);
const queryLoading = ref(false)
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    dept: undefined,
    name: undefined,
    isContract: undefined,

})
const columnData = ref()
const deptList = ref<{ deptId: string; deptName: string; }[]>([])
const recruiterList = ref<{ userId: string; nickName: string; }[]>([])
const contractStatusList = ref([
    { label: '是', value: '1' },
    { label: '否', value: '0' },
])
/** 同比前日的class样式 */
const computedByLess = (less: string) => {
    if (Number(less) < 0) {
        return 'increaseCompare'
    } else if (Number(less) > 0) {
        return 'reduceCompare'
    } else {
        return 'compare'
    }
}
/** 获取招商部门信息 */
const getDeptLists = async () => {
    const res = await getDeptList({ parentId: '1796913597400784898' })
    deptList.value = res.data
}

/** 根据招商部获取招商员 */
const deptChange = async (event: string) => {
    if (event) {
        const res = await getUserList({ deptId: event })
        recruiterList.value = res.rows
        queryParams.value.name = undefined
    } else {
        recruiterList.value = []
        queryParams.value.name = undefined
    }
}
/** 商品列表 */
const getList = async () => {
    try {
        loading.value = true;
        const res = await merchantList(queryParams.value);
        list.value = res.rows;
        total.value = res.total;
        loading.value = false;
        queryLoading.value = false
    } catch (e) {
    } finally {
        loading.value = false;
    }
}
/** 搜索按钮操作 */
const handleQuery = () => {
    queryLoading.value = true
    queryParams.value.pageNum = 1;
    getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    recruiterList.value = []
    handleQuery();
};
/** 导出按钮操作 */
const handleExport = () => {
    proxy?.download("basic/dataScreening/supplierExport", {
        ...queryParams.value,
    }, `建联商家_${new Date().getTime()}.xlsx`)
}
/** 获取colmun */
const getColmun = async () => {
    const columnDatas = await proxy?.useColumn('数据看板昨日建联商家')
    jlBusinessColumns.value = columnDatas.columnCustom
    columnData.value = columnDatas
    queryParams.value.pageSize = columnDatas.columnPageSize || 10
}
/** 页数变化 */
const paginationChange = async () => {
    await getList();
    await proxy?.useColumnUpdate(columnData.value, queryParams.value.pageSize)
    getColmun()
}
/** 拖拽事件 */
const dragEnd = async (newWidth: number, oldWidth: number, column: any, event: MouseEvent) => {
    columnData.value.columnCustom.map((item: any) => {
        if (item.prop == column.property) {
            item.width = newWidth
        }
    })
    await proxy?.useColumnUpdate(columnData.value, queryParams.value.pageSize)
}
onMounted(async () => {
    queryParams.value.pageNum = 1;
    await getColmun();
    await getList();
    getDeptLists();
})
</script>
<style lang="scss" scoped>
.increaseCompare {
    color: #00B42B;
}

.reduceCompare {
    color: #FC2540;
}

.compare {
    color: #1A1B1C;
}

:deep(.el-card__header) {
    display: flex;
    justify-content: flex-end;
}
</style>